<template>
  <div>
    <div v-show="$route.name == 'print'">
      <div v-for="item1 in data" style="height: 540px;line-height: 1.5">
        <div style="height: 470px;">
          <div class="title1">广州润隆贸易有限公司</div>
          <div class="title1" >电话：18588546050</div>
          <div style="display: flex; justify-content: space-around;">
            <div class="title2">客户：{{basename}}店</div>
            <div class="title2">地址：{{address}}</div>
            <div class="title2">订单号：{{sell_number}}</div>
          </div>
          <el-row>
            <el-col :span="20" :offset="2">
              <table class="GoodsTable" cellpadding="0" cellspacing="0" style="font-size:16px;text-align: center;margin-top: 20px;">
                <tr style="height: 2px">
                  <td style="width: 10%;">序号</td>
                  <td style="width: 20%;">分类</td>
                  <td style="width: 30%;">名称</td>
                  <td style="width: 10%;">数量</td>
                  <td style="width: 10%;">单位</td>
                  <td style="width: 20%;">备注</td>
                </tr>
                <tr align="center" class="GoodData" v-for="(item, index) in item1" :value="item.id" :key="item.id">
                  <td>{{index + 1}}</td>
                  <td>{{item.category_name}}</td>
                  <td>{{item.good_name}}</td>
                  <td>{{item.count}}</td>
                  <td>{{item.unit}}</td>
                  <td>{{item.comment}}</td>
                </tr>
              </table>
            </el-col>
          </el-row>
        </div>
        <div style="height: 70px;padding-top: 10px;">
          <el-row>
            <el-col :span="6" :offset="2" class="sign">出货人签名：</el-col>
            <el-col :span="6" :offset="2" class="sign">送货人签名：</el-col>
            <el-col :span="6" :offset="2" class="sign">收货人签名：</el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      basename: '',
      sell_number: '',
      address: '',
      data: []
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.getapplyData()
  },
  methods: {
    getapplyData() {
      if (this.$route.name === 'print') {
        if (this.$route.params.id) {
          this.id = this.$route.params.id
          localStorage.setItem('appliedId', this.$route.params.id)
        } else {
          this.id = localStorage.getItem('appliedId')
        }
        if (this.id) {
          this.getInnerPrint()
        }
      }
    },
    async getInnerPrint() {
      const { data: result } = await this.$http.get('/store-inner/print/' + this.id )
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.data = result.data.data
      this.basename = result.data.info.basename
      this.sell_number = result.data.info.sell_number
      this.address = result.data.info.address
    }
  }
}
</script>
<style lang="less" scoped>
.title1 {
  font-size: 24px;
  margin: auto;
  text-align: center;
  font-weight: bold;
  font-family: 'kaiti';
  color: #464c5b;
}
.title2 {
  font-size: 16px;
  font-weight: bold;
  font-family: 'kaiti';
  color: #464c5b;
}
.sign {
  font-size: 14px;
  font-weight: bold;
  color: #464c5b;
}
.order {
  font-size: 14px;
  line-height: 40px;
  font-weight: bold;
}
.GoodsTable {
  width: 100%;
  font-weight: bold;
  font-family: 'kaiti';
  border: solid #464c5b; 
  border-width: 1px 0px 0px 1px;
}
.GoodData {
  font-weight: normal;
  font-family: 'kaiti';
}

.GoodsTable td {
  border: solid #464c5b;
  border-width: 0px 1px 1px 0px ;
  color: #464c5b;
}
</style>
<style media="print">
  @page{
    size: auto;
    margin: 0mm;
  }
</style>